<template>
	<view :data-theme='theme()' :class="'order-datail ' + theme()" v-if="!loadding">
		<view class="top">
			<view class="top_left">
				<image class="time" src="https://jiechendy.sdshengyue.cn/uploads/77/f80f93ecf14c24c69aae9fa6168c1b.png">
				</image>
			</view>
			<view v-if="detail.state_text == '待付款'" class="top_right">
				订单提交成功，请完成支付
			</view>
			<view v-if="detail.state_text == '待使用'" class="top_right">
				订单待使用。
			</view>
			<view v-if="detail.state_text == '服务中'" class="top_right">
				已为您预约快递，请保持电话畅通。
			</view>
			<view v-if="detail.state_text == '已完成'" class="top_right">
				订单完成
			</view>
			<view v-if="detail.state_text == '已取消'" class="top_right">
				您已取消订单，已支付的金额将会原路退还到您的账户
			</view>
		</view>
		<!--详情状态-->
		<view class="center">
			<view class="center_top">
				服务信息
			</view>
			<view class="xian">
			</view>
			<view class="center_bottom">
				<view class="center_text">
					<view class="text">
						订单编号
					</view>
					<view class="text2">
						{{ detail.order_no }}
					</view>
				</view>
				<view class="center_text">
					<view class="text">
						服务名称
					</view>
					<view class="text2" v-for="(item, index) in detail.product">
						{{ item.product_name }} <span v-if="item.spec_type==20">{{ item.product_attr }}</span>
					</view>
				</view>
				<view class="center_text">
					<view class="text">
						下单时间
					</view>
					<view class="text2">
						{{ detail.create_time }}
					</view>
				</view>
				<view class="center_text" v-if="detail.state_text != '待付款'">
					<view class="text">
						预约时间
					</view>
					<view class="text2">
						<!-- {{fuwuDatile.yutime}} -->
						{{detail.jd_time}}
					</view>
				</view>
				<view class="center_text1" v-if="detail.address != null">
					<view class="text">
						取货地址
					</view>
					<view class="text2">
						<view class="">
							{{ detail.address.detail }}
						</view>
						<view class="text3">
							{{ detail.address.name }}({{ detail.address.phone }})
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="center center1" v-if="detail.state_text != '待付款'">
			<view class="center_top">
				收费明细
			</view>
			<view class="xian">
			</view>
			<view class="center_bottom">
				<view class="center_text">
					<view class="text">
						支付时间
					</view>
					<view class="text2">
						<!-- {{shoufeiDatile.zifutime}} -->
						{{pay_time}}
					</view>
				</view>
				<view class="center_text">
					<view class="text">
						支付方式
					</view>
					<view class="text2">
						{{detail.pay_type.text}}
					</view>
				</view>
				<view class="center_text">
					<view class="text">
						订单价格
					</view>
					<view class="text2">
						￥{{ detail.total_price }}
					</view>
				</view>
				<view class="center_text">
					<view class="text">
						运费
					</view>
					<view class="text2">
						￥{{ detail.express_price }}
					</view>
				</view>
				<view class="center_text" v-if="detail.product_reduce_money > 0">
					<view class="text">
						商品立减
					</view>
					<view class="text2">
						-￥{{ detail.product_reduce_money }}
					</view>
				</view>
				<view class="center_text" v-if="detail.points_money>0">
					<view class="text">
						{{points_name()}}抵扣金额：
					</view>
					<view class="text2">
						- ¥{{ detail.points_money }}
					</view>
				</view>
				<view class="center_text" v-if=" detail.coupon_money>0">
					<view class="text">
						店铺优惠券
					</view>
					<view class="text2">
						- ¥ {{ detail.coupon_money }}
					</view>
				</view>
				<view class="center_text" v-if=" detail.coupon_money_sys>0">
					<view class="text">
						平台优惠券
					</view>
					<view class="text2">
						- ¥ {{ detail.coupon_money_sys }}
					</view>
				</view>
				<view class="center_text" v-if="detail.fullreduce_money>0">
					<view class="text">
						店铺满减
					</view>
					<view class="text2">
						- ¥ {{ detail.fullreduce_money }}
					</view>
				</view>
				<view class="center_text1"
					v-if="detail.state_text == '已付款，待发货' || detail.state_text == '已发货，待收货' || detail.state_text == '已完成'">
					<view class="text">
					</view>
					<view class="text2">
						<span>实际付款：</span>
						<span class="red"
							v-if="detail.order_source==70">¥{{ (detail.pay_price*1+detail.advance.pay_price*1).toFixed(2) }}</span>
						<span class="red" v-else>￥{{ detail.pay_price }}</span>
					</view>
				</view>
			</view>
		</view>


		<template v-if="detail.order_source!=70">
			<view class="bottom"
				v-if="detail.order_status.value != 20&&detail.order_status.value != 30 && source=='user'">
				<!-- 				<view class="button1">
					咨询客服
				</view> -->
				<button class="call" open-type="im" bindim="onimError" data-im-id='1225213885'>咨询客服</button>
				<view class="button" v-if="detail.pay_status.value == 10" @click="cancelOrder(detail.order_id)">
					取消订单
				</view>
				<block v-if="detail.order_status.value != 21">
					
					<view v-if="detail.pay_status.value == 20 && detail.delivery_status.value == 10"
						>
						<zijie-pay-button :orderStatus="1" :orderId="detail.order_no"></zijie-pay-button>
						</view>
					<!-- <view v-if="detail.pay_status.value == 20 && detail.delivery_status.value == 10"
						@click="cancelOrder(detail.order_id)" class="button1">申请取消</view> -->
				</block>
				<view v-else class="button">
					取消申请中
				</view>
				<view class="button" v-if="detail.delivery_status.value == 20 && detail.receipt_status.value == 10"
					@click="orderReceipt(detail.order_id)">
					确认收货
				</view>
				<view class="button" @click="onPayOrder(detail.order_id)" v-if="detail.pay_status.value == 10">
					去支付
				</view>
				<button class="button" v-if="detail.state_text == '待使用'" style="color: #E96725;border: 1px solid #E96725;"
					@click="shiyong(detail.order_id)">使用</button>
				<view v-if="detail.state_text == '服务中'" class="button" @click="lookBG()">
					预检报告
				</view>
				<view v-if="detail.state_text == '服务中'" class="button" @click="lookJD()">
					查看物流
				</view>
				<!-- 				<view class="button" @click="lookJD()">
					查看物流
				</view> -->
			</view>
			<!-- 操作栏 -->

		</template>
		<Mpservice v-if="isMpservice" :isMpservice="isMpservice" :shopSupplierId="detail.supplier.shop_supplier_id"
			@close="closeMpservice"></Mpservice>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	import {
		pay
	} from '@/common/pay.js';
	import Mpservice from '@/components/mpservice/Mpservice.vue';
	export default {
		data() {
			return {
				pay_time:'',
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*是否显示支付类别弹窗*/
				isPayPopup: false,
				/*订单id*/
				order_id: 0,
				/*订单详情*/
				detail: {
					order_status: [],
					address: {
						region: []
					},
					product: [],
					pay_type: [],
					delivery_type: [],
					pay_status: []
				},
				extractStore: {},
				source: 'user',
				service_open: 0,
				service_type: 10,
				isMpservice: false,
				/*是否显示支付宝支付，只有在h5，非微信内打开才显示*/
				showAlipay: false,
				user_id: 0,
				expressList: [],
				express_id: '',
				express_name: '',
				express_no: '',
				status: 1,
				cancel_refuse: '',
				pay_type: 10,
				fuwuDatile: {
					bianhao: '1153699624989761536',
					name: '2件任洗',
					xiatime: '2023-09-19 17:30:00',
					yutime: '2023-09-20 09:00:00',
					adress: '山东省烟台市莱山区XX路XX校区',
					tel: '李先生(17836542100)'
				},
				shoufeiDatile: {
					zifutime: '2023-09-19 23:16:59',
					methods: '微信支付',
					money: '69.00',
					juan: '0.00',
					shiji: '69.00'
				}
			};
		},
		components: {
			Popup,
			Mpservice,
		},
		onLoad(e) {
			this.order_id = e.order_id;
			this.user_id = uni.getStorageSync('user_id');
			if (e.source) {
				this.source = e.source;
			}
		},
		onimError(e) {
			console.log("拉起IM客服成功", e);
		},
		mounted() {
			uni.showLoading({
				title: '加载中'
			});
			/*获取订单详情*/
			this.getData();
		},
		methods: {
			shiyong(id) {
				uni.navigateTo({
					url: '/pages/order/call?id=' + id
				})
			},
			lookJD() {
				uni.navigateTo({
					url: '/pages/order/JD?order_id=' + this.order_id
				})
			},
			lookBG() {
				uni.navigateTo({
					url: '/pages/order/yujian?order_id=' + this.order_id
				})
			},
			/*获取数据*/
			getData() {
				let self = this;
				let order_id = self.order_id;
				let url = 'user.order/detail';
				if (this.source == 'supplier') {
					url = 'supplier.order/detail';
				}
				self.loadding = true;
				self._get(url, {
						order_id: order_id,
						pay_source: self.getPlatform()
					},
					function(res) {
						self.expressList = res.data.expressList;
						self.detail = res.data.order;
						self.pay_time=self.formatDate(self.detail.pay_time)
						self.extractStore = res.data.order.extractStore;
						self.service_open = res.data.setting.service_open;
						if (res.data.setting.mp_service == null) {
							self.service_type = 10;
						} else {
							self.service_type = res.data.setting.mp_service.service_type;
						}
						if (res.data.show_alipay) {
							self.showAlipay = true;
						}
						self.loadding = false;
						uni.hideLoading();
					}
				);
			},
			formatDate(date1) {
			   const date = new Date(parseInt(date1)*1000);
			        let myYear = date.getFullYear();
			        let myMonth = date.getMonth() + 1;
			        let myWeekday = date.getDate();
			        let myHour = date.getHours();
			        let myMinute = date.getMinutes();
			        let mySecond = date.getSeconds();
			
			        if (myMonth < 10) { 
			   
			          myMonth = '0' + myMonth;
			        }
			        if (myWeekday < 10) { 
			   
			          myWeekday = '0' + myWeekday;
			        }
			        if (myHour < 10) { 
			   
			          myHour = '0' + myHour;
			        }
			        if (myMinute < 10) { 
			   
			          myMinute = '0' + myMinute;
			        }
			        if (mySecond < 10) { 
			   
			          mySecond = '0' + mySecond;
			        }
			        return (`${ 
			     myYear}-${ 
			     myMonth}-${ 
			     myWeekday} ${ 
			     myHour}:${ 
			     myMinute}:${ 
			     mySecond}`);
			      },
			/*显示支付方式*/
			hidePopupFunc() {
				this.isPayPopup = false;
			},

			/*取消订单*/
			cancelOrder(e) {
				let self = this;
				let order_id = e;
				wx.showModal({
					title: '提示',
					content: '您确定要取消当前订单吗?',
					success: function(o) {
						if (o.confirm) {
							uni.showLoading({
								title: '正在处理'
							});
							self._get(
								'user.order/cancel', {
									order_id: order_id
								},
								function(res) {
									uni.hideLoading();
									uni.showToast({
										title: '操作成功',
										duration: 2000,
										icon: 'success'
									});
									self.getData();
								}
							);
						}
					}
				});
			},

			/*确认收货*/
			orderReceipt(order_id) {
				let self = this;
				wx.showModal({
					title: '提示',
					content: '您确定要收货吗?',
					success: function(o) {
						if (o.confirm) {
							uni.showLoading({
								title: '正在处理'
							});
							self._post(
								'user.order/receipt', {
									order_id: order_id
								},
								function(res) {
									uni.hideLoading();
									uni.showToast({
										title: res.msg,
										duration: 2000,
										icon: 'success'
									});
									self.getData();
								}
							);
						}
					}
				});
			},
			/*查看物流*/
			gotoExpress(order_id) {
				this.gotoPage('/pages/order/express/express?order_id=' + order_id);
			},
			/*申请售后*/
			onApplyRefund(e) {
				this.gotoPage('/pages/order/refund/apply/apply?order_product_id=' + e);
			},

			/*去支付*/
			payTypeFunc(payType) {
				let self = this;
				let order_id = self.order_id;
				self.isPayPopup = false;
				uni.showLoading({
					title: '加载中'
				});
				self._post(
					'user.order/pay', {
						payType: payType,
						order_id: order_id,
						pay_source: self.getPlatform()
					},
					function(res) {
						uni.hideLoading();
						pay(res, self);
					}
				);
			},

			/*支付方式选择*/
			onPayOrder(orderId) {
				let self = this;
				self.gotoPage('/pages/order/cashier?order_type=1&order_id=' + orderId)
			},
			gotoProduct(item) {
				this.gotoPage('/pages/product/detail/detail?product_id=' + item.product_id);
			},
			tochat() {
				if (this.service_type == 10) {
					this.isMpservice = true;
				}
				if (this.service_type == 20) {
					this.gotoPage('/pagesPlus/chat/chat?user_id=' + this.detail.supplier.supplier_user_id +
						'&shop_supplier_id=' + this.detail.supplier
						.shop_supplier_id + "&nickName=" + this.detail.supplier.name + '&order_id=' + this
						.order_id);
				}
			},
			changeRadio(e) {
				this.status = e.detail.value;
			},
			Cancel() {
				let self = this;
				wx.showModal({
					title: '提示',
					content: '您确定审核吗?',
					success: function(o) {
						if (o.confirm) {
							uni.showLoading({
								title: '正在处理'
							});
							self._post(
								'supplier.order/confirmCancel', {
									order_id: self.detail.order_id,
									is_cancel: self.status,
									cancel_refuse: self.cancel_refuse
								},
								function(res) {
									uni.hideLoading();
									self.showSuccess(res.msg);
									self.getData();
								}
							);
						}
					}
				});
			},
			changeSelect(e) {
				console.log(e);
				this.express_name = this.expressList[e.detail.value].express_name;
				this.express_id = this.expressList[e.detail.value].express_id;
			},
			sendPro() {
				let self = this;
				wx.showModal({
					title: '提示',
					content: '您确定要发货吗?',
					success: function(o) {
						if (o.confirm) {
							uni.showLoading({
								title: '正在处理'
							});
							self._post(
								'supplier.order/delivery', {
									order_id: self.detail.order_id,
									express_id: self.express_id,
									express_no: self.express_no
								},
								function(res) {
									uni.hideLoading();
									self.showSuccess(res.msg);
									self.getData();
								}
							);
						}
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.top {
		background-color: #fff;
		padding: 31rpx 47rpx 27rpx 32rpx;
		display: flex;
	}

	.top_left {
		padding-right: 27rpx;
		display: flex;
		align-items: center;
	}

	.time {
		width: 30rpx;
		height: 30rpx;

	}

	.top_right {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.xian {
		height: 1rpx;
		background-color: #f6f6f6;
	}

	.center {
		padding: 19rpx 30rpx 0rpx 30rpx;
	}

	.center_top {
		background-color: #fff;
		padding: 32rpx 29rpx;
		border-top-left-radius: 4rpx;
		border-top-right-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #323232;
	}

	.center_bottom {
		padding: 28rpx 30rpx 30rpx 30rpx;
		background-color: #fff;
		border-bottom-left-radius: 4rpx;
		border-bottom-right-radius: 4rpx;
	}

	.center_text {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.center_text1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.text {
		width: 20%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.text2 {
		width: 80%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #323232;
		text-align: right;
	}

	.text3 {
		text-align: right;
	}

	.red {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF0606;
	}

	.center1 {
		margin-bottom: 120rpx;
	}

	.bottom {
		width: calc(100% - 60rpx);
		position: fixed;
		padding: 24rpx 30rpx;
		bottom: 0;
		z-index: 999;
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(193, 193, 193, 0.67);
	}

	.button {
width: 160rpx;
		margin: 0;
		padding: 0;
		text-align:center;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		border: 1px solid #CCCCCC;
		border-radius: 0;
		background: #ffffff;
		white-space: nowrap;
		color: #CCCCCC;
		font-family: PingFang SC;
	}

	.call {
		width: 160rpx;
		margin: 0;
		padding: 0;
		text-align:center;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		border: 1px solid #CCCCCC;
		border-radius: 0;
		background: #ffffff;
		white-space: nowrap;
		color: #CCCCCC;
		font-family: PingFang SC;
	}

	.button1 {
		width: 160rpx;
		margin: 0;
		padding: 0;
		text-align:center;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		border: 1px solid #CCCCCC;
		border-radius: 0;
		background: #ffffff;
		white-space: nowrap;
		color: #CCCCCC;
		font-family: PingFang SC;
	}
</style>